<template>
	<div>
		<el-dialog
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:show-close="false"
			:close-on-press-escape="false"
		>
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				label-width="100px"
				:rules="rules"
			>
				<el-form-item label="机构名称：" prop="orgName">
					<el-select
						v-model="ruleForm.orgName"
						filterable
						clearable
						remote
						disabled
						:remote-method="remoteMethod"
						placeholder="请选择"
						@input="selectChange"
					>
						<el-option
							v-for="(item, index) in options"
							:key="index"
							:label="item.orgName"
							:value="index"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="卡号：" prop="title">
					<el-input v-model="ruleForm.cardNo" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名：" prop="patientName">
					<el-input v-model="ruleForm.patientName" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话：" prop="patientTelephone">
					<el-input v-model="ruleForm.patientTelephone"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm('ruleForm')"
					>确 定
				</el-button>
				<el-button @click="cancel('ruleForm')">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getOrgHospitalList } from '@/http/org.js'
import { editCard } from '@/http/cardMaster.js'
export default {
	props: {
		dialogTableVisible: {
			type: Boolean,
			default: false,
		},
		compileRow: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data() {
		return {
			options: [],
			optionsId: '',
			optionsName: '',
			rules: {
				patientTelephone: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
			},
		}
	},
	computed: {
		ruleForm() {
			console.log(this.compileRow)
			return this.compileRow
		},
	},
	created() {
		this.selectList()
	},
	methods: {
		selectChange(index) {
			this.optionsId = this.options[index].id
			this.optionsName = this.options[index].orgName
		},
		remoteMethod(query) {
			this.selectList(1, query.toUpperCase())
		},
		selectList(officeType, orgNameOrInputCode) {
			getOrgHospitalList({
				officeType: officeType,
				orgNameOrInputCode: orgNameOrInputCode,
			}).then(({ data }) => {
				this.leftLoginng = false
				if (data.head.code == 200) {
					this.options = data.data
				}
			})
		},
		// 确定
		confirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let param = {
						patientId: this.ruleForm.patientId,
						cardId: this.ruleForm.cardId,
						orgId: this.optionsId == '' ? this.ruleForm.orgId : this.optionsId,
						orgName:
							this.optionsName == '' ? this.ruleForm.orgName : this.optionsName,
						patientName: this.ruleForm.patientName,
						patientTelephone: this.ruleForm.patientTelephone,
					}
					console.log(param)
					if (this.ruleForm.cardType == '1') {
						editCard(param).then(({ data }) => {
							console.log(data)
							if (data.head.code == 200) {
								this.$message({
									message: '保存成功',
									type: 'success',
								})
							}
						})
					} else {
						console.log('调健康卡的，先不调')
					}

					this.$nextTick(() => {
						this.$refs['ruleForm'].clearValidate()
					})
					let dialogValue = {
						verdict: false,
						typeValue: 1,
					}
					this.$emit('newlyClick', dialogValue)
				} else {
					return false
				}
			})
		},

		// 取消

		cancel() {
			let dialogValue = {
				verdict: false,
				typeValue: 0,
			}
			this.$emit('newlyClick', dialogValue)
			this.$nextTick(() => {
				this.$refs['ruleForm'].clearValidate()
			})

			console.log('取消')
		},
	},
}
</script>

<style scoped></style>
